import React from 'react'

// 子组件
class Child extends React.Component {
    render() {
        return (
            <div>
                <h2>子组件***</h2>
            </div>
        )
    }
}
// 父组件
class Index extends React.Component {
    state = {
        val: ''
    }
    // 非受控组件ref(获取组件实例，dom)
    inputRef = React.createRef()

    childRef = React.createRef()
    // 受控组件
    valChange = (e) => {
        console.log(e.target.value)
        this.setState({
            val: e.target.value
        })
    }
    hSumb = (e) => {
        e.preventDefault()
        console.log(this.state)
        console.log('获取input-ref', this.inputRef, this.inputRef.current.value)
        console.log('获取子组件实例', this.childRef)

    }
    render() {
        return (
            <div>
                <h2>表单处理</h2>
                <form onSubmit={this.hSumb}>
                    {/* 双向绑定 */}
                    <input value={this.state.val} onChange={this.valChange} type="text" />
                    <p>{this.state.val}</p>
                    {/* ref对象 */}
                    <input ref={this.inputRef} type="text" /><br />
                    <button type="submit">提交</button>
                </form>
                {/*受控组件： 其值收到react控制的表单元素 */}
                <hr />
                <Child ref={this.childRef}></Child>
            </div>
        )
    }
}
export default Index